import styled from 'styled-components';
import { observer } from "mobx-react";
const Todo = styled.div`
  flex-grow:1;position: relative;
  width: 100%; height: 40px;
  >input{
    background-color:#fff; border: none;
    width: 100%; height: 40px; 
    padding-left:40px;box-sizing:border-box;
    &:focus{
      border:none;
      outline:none;
    }
  }
  >input[type=checkbox]{
    position: absolute;
    left: 5px;
    top:50%;transform:translateY(-50%);
    width: 20px;height:20px;
  }
`
export const TodoView = observer((props: any) => {
  return (
    <Todo>
      <input
        type="checkbox"
        checked={props.todo.done}
        onChange={e => props.todo.toggle()}
      />
      <input
        type="text"
        value={props.todo.name}
        onChange={e => props.todo.setName(e.target.value)}
      />
    </Todo>
  )
});